<template>
	<div class="login register">
		<router-link to='login'>
	        <img class="goback" src="../../../assets/images/movieClips/4/f-1.png" alt="" />
		</router-link>
	    <!--<img class="goback" src="../../../assets/images/movieClips/4/f-1.png" alt="" />-->
	    <img class='loginLogo' src="../../../assets/images/movieClips/4/login_logo.png" alt="" />
	     <p class="title">验证</p>
	     <div class="username">
	     	<div class="registerInfo">
	     		<!--本次注册需要短信验证，已发送验证码至-->
	     		请您输入电话号码，然后点击获取验证码
	     	</div>
	     	<div class="phoneTop">+86</div>
	     	<input v-model="username" class="usernameText"  style='outline:none'/>
	     	<div class="line">
	     	</div>
	     </div>
	     <div class="password">
	     	<div class="logoBox">
	     	    <img src="../../../assets/images/movieClips/7/certify_input_code_icon.png" alt="" />
	        </div>
	     	<input v-model="password" class="passwordText" placeholder="请输入验证码" style='outline:none'/>
	        <div class="getCode" @click="getCode">获取验证码</div>
	        <div class="line">
	     	</div>
	     </div>
	     <!--<router-link :to="{name:'login',name:''}">
	     	<div class="loginBtn" @click="registerSumit">提交</div>
	     </router-link>-->
	     <div class="loginBtn" @click="registerSumit">提交</div>
	     <div class="dialog">
	     	<el-dialog
				title="提示"
				:visible.sync="dialogVisible"
				width="30%"
			>
				<span>{{dialogInfo}}</span>
				<span slot="footer" class="dialog-footer">
					<el-button @click="dialogVisible = false">取 消</el-button>
					<el-button type="primary" @click="dialogVisible = false">确 定</el-button>
				</span>
			</el-dialog>
	     </div>
	</div>
</template>

<script>
	import qs from "qs"
export default{
	
	name:"register",
	data(){
		return{
            dialogInfo:'',
            dialogVisible:false,
            password:'',
            username:'',
            isLogin:false,
            isskip:false//是否跳转到登录页面
		}
	},
	methods:{
		handleClose(done) {
	        this.$confirm('是否跳转到登录页面登录？')
	        .then(_ => {
	            done();
	        })
	        .catch(_ => {});
	    },
		getRandom(min,max){
		    return Math.floor(Math.random()*(max-min))+min;
		},
		yanzhengma(length){
		    var str='abcdefghijklmnopqrstuvwxyzABCDE' +
		        'FGHIJKLMNOPQRSTUVWXYZ0123456789';
		    var newstr='';
		    for(var i=0;i<length;i++) {
		        var num = this.getRandom(0,61);
		        newstr += str[num];
		    }
		    return newstr;
		},
		getCode(event){
			this.password=this.yanzhengma(6);
		},
		registerSumit(event){
			this.dialogVisible=true;
		    var addInfo={
				username:this.username,
				password:this.password
				}
	   	    this.$axios.post("http://localhost:3000/selectuser",{
	   	    	username:this.username
	   	    })
	   	    .then(res=>{
	 	  		if(!res.data.msg){
	 	  			this.dialogInfo='该用户名已经注册过了！'
	 	  		}else{
	 	  			if(this.username!=''&&this.password!=''){
	 	  				this.$axios.post('http://localhost:3000/adduser',addInfo)
		   	  			.then(res=>{
		   	  				if(res.data.msg=="success"){
		   	  					this.dialogInfo='注册成功，去登录吧！';
		   	  					this.isLogin=true;
		   	  					this.isskip=true;
		   	  				}else{
		   	  					this.dialogInfo='注册成功失败，请重新注册！'
		   	  				}
		   	  			})
		   	  			.catch(error=>{
		   	  				console.log(error)
		   	  			})
	 	  			}else{
	 	  				this.dialogInfo='用户名或验证码不能为空！'
	 	  			}
	   	  			
	 	  		}
	   	  	})
		   	.catch(error=>{
		   	 	console.log(error);
		   	})
		   
        }
    }
}
</script>

<style scoped lang="less">
@current:100rem;
.login,.register{
	width: 100%;
	height: 1135/@current;
	position: relative;
	background-image: url('../../../assets/images/movieClips/4/login_bg.png');
	.goback{
		position: absolute;
		left: 40/@current;
		top: 70/@current;
		width: 25/@current;
		height: 40/@current;
	}
	.loginLogo{
		margin-left: 200/@current;
		margin-top: 180/@current;
		width: 240/@current;
		height: 120/@current;
	}
	.title{
		margin: 50/@current 287/@current 0 ;
		display: block;
		width: 65/@current;
		height: 50/@current;
		font-size: 30/@current;
		color: #c0adcd;
		font-weight: 700;
		border-bottom: 4/@current solid #A54BE8;
		text-align: center;
	}
	.phoneTop{
		width: 50/@current;
		font-size: 30/@current;
		color: #fff;
		position: relative;
		top: 40/@current;
		left: 85/@current;
	}
	.usernameText{
		top:-60/@current;
		padding-left: 100/@current;
	}
	.passwordText{
		top:13/@current ;
	}
	.usernameText,.passwordText{
		font-size: 30/@current;
		color: #ebd5fb!important;
		display: block;
		position: relative;
		left: -50/@current;
		background-color: transparent;
		border: none;
	}
	.username,.password{
		box-sizing: border-box;
		padding: 0 100/@current;
		overflow: hidden;
		.registerInfo{
			margin-top: 60/@current;
			font-size: 24/@current;
			color: #EBD5FB;
		}
		.line{  
			width: 100%;
			height: 3/@current;
			background: url('../../../assets/images/movieClips/4/login_long_line.png')no-repeat;
		}
	}
	.username{
		.usernameText{
			float: left;
			margin-top: 65/@current;
			margin-left: 100/@current;
		}
		.line{
			margin-left: 35/@current;
			width: 80%;
			margin-top: 60/@current;
		}
	}
	.password{
		margin-top: 0/@current;
		height:150/@current ;
		.passwordText{
			float: left;
			margin-top: -70/@current;
			margin-left: 100/@current;
		}
		.logoBox{
			img{
				width: 30/@current;
				height: 35/@current;
			}
		}
		.getCode{
			color: white;
			text-align: center;
			font-size: 24/@current;
			position: relative;
			right: -260/@current;
			top: -70/@current;
			width:180/@current ;
			height: 70/@current;
			line-height: 70/@current;
			background-size: 180/@current 70/@current;
		    background-image: url('../../../assets/images/movieClips/7/certify_get_code_normal.png');
		}
		.line{
			margin-top: -70/@current;
		}
	}
	.loginBtn{
		background: url('../../../assets/images/movieClips/4/login_btn_normal.png');
		width: 440/@current;
		height: 75/@current;
		margin-left: 100/@current;
		margin-top: 60/@current;
		font-size: 30/@current;
		color: #ebd5fb;
		text-align: center;
		line-height:75/@current ;
	}
}
</style>